<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>库存销量统计</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        .spinner {
            margin: 11px auto 0;
            height: 20px;
            text-align: center;
        }

        .spinner > div {
            width: 10px;
            height: 10px;
            background-color: #67CF22;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            /* Prevent first frame from flickering when animation starts */
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes bouncedelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0.0)
            }
            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {
            0%, 80%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        @-moz-document url-prefix() {
            fieldset {
                display: table-cell;
            }
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <div class="row">
        <h4 class="col-sm-6 col-xs-9">卷烟销售统计：</h4>
    </div>

    <form class="form-inline" style=" margin-bottom: 5px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text" placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>
        <%--<div class="form-group input-group">--%>
        <%--<input id="prodNameInput" class="form-control input-sm" readonly type="text" placeholder="默认为磨砂">--%>
        <%--<span class="input-group-btn">--%>
        <%--<button type="button" class="btn btn-default btn-sm" title="选择商品作为查询条件"--%>
        <%--onclick="javascript:$('#gridSystemModal').modal('show');">选择</button>--%>
        <%--</span>--%>
        <%--</div>--%>
        <div class="form-group">
            <input id="operatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择开始月份">
        </div>
        <div class="form-group">
            <input id="endOperatorTimeInput" class="form-control input-sm" type="text" placeholder="请选择结束月份">
        </div>
        <button type="button" class="btn btn-sm btn-success" @click="getData();">查询</button>
    </form>

    <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 main" id="main1" style="margin-top: 30px;"></div>
        <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 main" id="main2" style="margin-top: 30px;"></div>
    </div>





</div>

<div class="modal fade" tabindex="-1" role="dialog" id="gridSystemModal" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">选择品规</h4>
            </div>
            <div class="modal-body">
                <div class="content_wrap">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="selectProductTreeNames();">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src=${contextPath}/static/layer/layer.js></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            productCode: "'6901028039741'",
            time: '',
            cityName: '',
            quXianName: '',
            channelName: '',
            empName: '',
            endTime: ''
        },
        methods: {
            initTimeInput: function () {
                $('#operatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                });
                $("#operatorTimeInput").on("change", function () {
                    app.time = this.value
                })

                var now = new Date();
                var defaultTime = now.getFullYear() + '-'
                var month = now.getMonth() + 1
                if (month < 10) {
                    month = '0' + month
                }
                defaultTime = defaultTime + month

                //$("#operatorTimeInput").val(defaultTime)
                //app.time = defaultTime


                $('#endOperatorTimeInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    minView: 2,
                    showMeridian: 1,
                    format: "yyyy-mm-dd",
                });
                $("#endOperatorTimeInput").on("change", function () {
                    app.endTime = this.value
                })


            },
            getData: function () {
                layer.load(1)
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();


                $.ajax({
                    url: '${contextPath}/shop/getStockSaleStatistics',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            // productCode: this.productCode,
                            time: this.time,
                            endTime: this.endTime,
                            cityName: cityName,
                            quXianName: quXianName,
                            channelName: channelName,
                            empName: empName
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success) {
                            var main1Data = data.data.main1Data;
                            app.updateMain1Data(main1Data);

                            var main2Data = data.data.main2Data;
                            app.updateMain2Data(main2Data);

                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg("网络错误")
                    }
                })
            },
            updateMain1Data: function (main1Data) {

               // if (!main1Data) return
                var times = []
                var quantity = []
                var prices = []
                var names = []

                var totilTimes = 0;
                var totilQuantity = 0;
                var totilPrices = 0;
                for (var index in main1Data) {
                    var data = main1Data[index]

                    times.push(data.time);
                    names.push(data.name)
                    quantity.push(data.quantity)
                    prices.push(data.prices)

                    totilTimes += data.time;
                    totilQuantity += data.quantity;
                    totilPrices += data.prices;
                }

                times.unshift(totilTimes);
                names.unshift("合计")
                quantity.unshift(totilQuantity)
                prices.unshift(totilPrices)

                var main1Option = {
                        color: ['rgba(227,117,48,1)', 'rgba(97,97,97,1)', 'rgba(179,179,179,1)'],
                        title: {
                            text: "县区销售统计"
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: {
                                    show: true,
                                    readOnly: true
                                },
                                restore: {
                                    show: false
                                },
                                saveAsImage: {
                                    show: false
                                }
                            }
                        },
                        grid: {
                            containLabel: true
                        },
                        legend: {
                            data: ["次数", "销量", "金额"]
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                show: true,
                                splitNumber: 15,
                                textStyle: {
                                    fontFamily: "微软雅黑",
                                    fontSize: 12
                                }
                            },
                            data: names,
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                name: "次数",
                                show: false,
                                position: 'right',
                                axisLabel: {
                                    formatter: ''
                                }
                            }, {
                                type: 'value',
                                name: "销量",
                                position: 'right',
                                show: false,
                                axisLabel: {
                                    formatter: ''
                                }
                            }, {
                                type: 'value',
                                name: "金额",
                                position: 'left',
                                show: false,
                                axisLabel: {
                                    formatter: ''
                                }
                            },],

                        "dataZoom": [{
                            "show": true,
                            "height": 30,
                            "xAxisIndex": [
                                0
                            ],
                            bottom: 20,
                            "start": 0,
                            "end": 50,
                            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                            handleSize: '110%',
                            handleStyle: {
                                color: "#d3dee5",

                            },
                            textStyle: {
                                color: "#fff"
                            },
                            borderColor: "#90979c"


                        }, {
                            "type": "inside",
                            "show": true,
                            "height": 15,
                            "start": 1,
                            "end": 35
                        }],
                        series: [{
                            name: "次数",
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            var value = p.value;
                                            if (value <= 0) {
                                                return ''
                                            }
                                            if (value >= 10000) {
                                                value = (value / 10000).toFixed(2) + "万"
                                            }
                                            return value + "次";
                                        }
                                    }
                                }
                            },
                            data: times
                        }, {
                            name: "销量",
                            type: 'bar',
                            yAxisIndex: 1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            var value = p.value;
                                            if (value <= 0) {
                                                return ''
                                            }
                                            if (value >= 10000) {
                                                value = (value / 10000).toFixed(2) + "万"
                                            }
                                            return value + "包";
                                        }
                                    }
                                }
                            },
                            data: quantity
                        },
                            {
                                name: "金额",
                                type: 'bar',
                                yAxisIndex: 2,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            position: "top",
                                            formatter: function (p) {
                                                var value = p.value;
                                                if (value <= 0) {
                                                    return ''
                                                }
                                                if (value >= 10000) {
                                                    value = (value / 10000).toFixed(2) + "万"
                                                }
                                                return value + "元";
                                            }
                                        }
                                    }
                                },
                                barGap: '10%',
                                data: prices
                            }]
                    }
                ;
                myChart1.setOption(main1Option,true)

            },
            updateMain2Data: function (main2Data) {
              //  if (!main2Data) return
                var times = []
                var quantity = []
                // var prices = []
                var names = []

                //    var totilTimes = 0;
                //    var totilQuantity = 0;
                //    var totilPrices = 0;
                for (var index in main2Data) {
                    var data = main2Data[index]

                    times.push(data.time);
                    names.push(data.name)
                    quantity.push(data.quantity)
                    //  prices.push(data.prices)

                    // totilTimes  += data.time;
                    // totilQuantity  += data.quantity;
                    // totilPrices  += data.prices;
                }

                var main2Option = {
                    color: ['rgba(227,117,48,1)', 'rgba(97,97,97,1)'],
                    title: {
                        text: '销量前十五规格'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: true
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['销量', '次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names,
                    }],
                    yAxis: [{
                        type: 'value',
                        "splitLine": {
                            "show": false
                        },
                        name: '销量',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value} 包'
                        }
                    }, {
                        type: 'value',
                        "splitLine": {
                            "show": false
                        },
                        name: '次数',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    },],
                    series: [{
                        name: '次数',
                        type: 'line',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }, {
                        name: '销量',
                        type: 'bar',

                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart2.setOption(main2Option,true)
            },
            updateMain3Data: function (main3Data) {
                //if (!main3Data) return;
                //处理数据
                //先拿到name的值
                var names = [];
                outer:
                for (var index in main3Data) {
                    var data = main3Data[index]
                    var name = data.name
                    for (var indx in names) {
                        var n = names[indx]
                        if (name == n) {
                            continue outer
                        }
                    }
                    names.push(name)
                }
                var times = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
                var quantitys = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0]];

                for (var index in main3Data) {
                    var data = main3Data[index]
                    var name = data.name

                    for (var indx in names) {
                        var n = names[indx]
                        if (name == n) {
                            quantitys[indx][data.time-1] = data.quantity
                        }
                    }
                }

                var series = [];
                for(var indx in names) {
                    var n = names[indx];
                    series.push({
                        name: n,
                        type: 'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantitys[indx]
                    })

                }

                if(series.length == 0) {
                    series.push({
                        name: '查询没有数据',
                        type: 'line',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantitys[0]
                    })

                    names.push('查询没有数据')
                }

                var main3Option = {
                    color: ['rgba(226,108,34,1)','rgba(127,127,127,1)','rgba(126,126,126,1)','rgba(175,175,175,1)','rgba(128,132,122,1)'],
                    title: {
                        text: '前五品牌时段'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: true
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: names
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: times
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            "splitLine": {
                                "show": false
                            },
                            name: '销售数量',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        },],
                    series: series
                }

                myChart3.setOption(main3Option,true)
            },
            updateMain4Data: function (main4Data) {
               // if (!main4Data) return
                var times = []
                var quantity = []
                var prices = []
                var names = []

                var totilTimes = 0;
                var totilQuantity = 0;
                var totilPrices = 0;
                for (var index in main4Data) {
                    var data = main4Data[index]
                    var time = data.time ?  data.time:0;
                    var quanti = data.quantity?  data.quantity:0;
                    var price = data.prices?  data.prices:0;

                    times.push(time);
                    names.push(data.name);
                    quantity.push(quanti)
                    prices.push(price)

                    totilTimes += time;
                    totilQuantity += quanti;
                    totilPrices += price;
                }

                //times.unshift(totilTimes);
                //names.unshift("合计")
                //quantity.unshift(totilQuantity)
                //prices.unshift(totilPrices)

                var main4Option = {
                        color: ['rgba(227,117,48,1)', 'rgba(97,97,97,1)', 'rgba(179,179,179,1)'],
                        title: {
                            text: "大类销售统计"
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: {
                                    show: true,
                                    readOnly: true
                                },
                                restore: {
                                    show: false
                                },
                                saveAsImage: {
                                    show: false
                                }
                            }
                        },
                        grid: {
                            containLabel: true
                        },
                        legend: {
                            data: ["次数", "销量", "金额"]
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                show: true,
                                splitNumber: 15,
                                textStyle: {
                                    fontFamily: "微软雅黑",
                                    fontSize: 12
                                }
                            },
                            data: names,
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                name: "次数",
                                show: false,
                                position: 'right',
                                axisLabel: {
                                    formatter: ''
                                }
                            }, {
                                type: 'value',
                                name: "销量",
                                position: 'right',
                                show: false,
                                axisLabel: {
                                    formatter: ''
                                }
                            }, {
                                type: 'value',
                                name: "金额",
                                position: 'left',
                                show: false,
                                axisLabel: {
                                    formatter: ''
                                }
                            },],
                        series: [{
                            name: "次数",
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            var value = p.value;
                                            if (value <= 0) {
                                                return ''
                                            }
                                            if (value >= 10000) {
                                                value = (value / 10000).toFixed(2) + "万"
                                            }
                                            return value + "次";
                                        }
                                    }
                                }
                            },
                            data: times
                        }, {
                            name: "销量",
                            type: 'bar',
                            yAxisIndex: 1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            var value = p.value;
                                            if (value <= 0) {
                                                return ''
                                            }
                                            if (value >= 10000) {
                                                value = (value / 10000).toFixed(2) + "万"
                                            }
                                            return value + "包";
                                        }
                                    }
                                }
                            },
                            data: quantity
                        },
                            {
                                name: "金额",
                                type: 'bar',
                                yAxisIndex: 2,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            position: "top",
                                            formatter: function (p) {
                                                var value = p.value;
                                                if (value <= 0) {
                                                    return ''
                                                }
                                                if (value >= 10000) {
                                                    value = (value / 10000).toFixed(2) + "万"
                                                }
                                                return value + "元";
                                            }
                                        }
                                    }
                                },
                                barGap: '10%',
                                data: prices
                            }]
                    }
                ;
                myChart4.setOption(main4Option,true)

            },
            updateMain5Data: function (main5Data) {
              //  if (!main5Data) return
                var times = [0,0,0,0,0];
                var quantity = [0,0,0,0,0];
                var prices = [0,0,0,0,0];
                var names = ['一类', '二类', '三类', '四类', '五类'];

                var totilTimes = 0;
                var totilQuantity = 0;
                var totilPrices = 0;
                outer:
                for (var index in main5Data) {
                    var data = main5Data[index]
                    var time = data.time ?  data.time:0;
                    var quanti = data.quantity?  data.quantity:0;
                    var price = data.prices?  data.prices:0;

                    var idx
                    switch (data.name) {
                        case names[0]:
                            idx=0
                            break;
                        case names[1]:
                            idx=1
                            break;
                        case names[2]:
                            idx=2
                            break;
                        case names[3]:
                            idx=3
                            break;
                        case names[4]:
                            idx=4
                            break;
                        default:
                            continue outer;
                            ;
                    }
                    times[idx] = time
                    quantity[idx] = quanti
                    prices[idx] = price

                    totilTimes += time;
                    totilQuantity += quanti;
                    totilPrices += price;
                }

               // times.unshift(totilTimes);
                //names.unshift("合计")
                //quantity.unshift(totilQuantity)
                //prices.unshift(totilPrices)

                var main5Option = {
                        color: ['rgba(227,117,48,1)', 'rgba(97,97,97,1)', 'rgba(179,179,179,1)'],
                        title: {
                            text: "五类烟销售统计"
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: {
                                    show: true,
                                    readOnly: true
                                },
                                restore: {
                                    show: false
                                },
                                saveAsImage: {
                                    show: false
                                }
                            }
                        },
                        grid: {
                            containLabel: true
                        },
                        legend: {
                            data: ["次数", "销量", "金额"]
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 45,
                                show: true,
                                splitNumber: 15,
                                textStyle: {
                                    fontFamily: "微软雅黑",
                                    fontSize: 12
                                }
                            },
                            data: names,
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                name: "次数",
                                show: false,
                                position: 'right',
                                axisLabel: {
                                    formatter: ''
                                }
                            }, {
                                type: 'value',
                                name: "销量",
                                position: 'right',
                                show: false,
                                axisLabel: {
                                    formatter: ''
                                }
                            }, {
                                type: 'value',
                                name: "金额",
                                position: 'left',
                                show: false,
                                axisLabel: {
                                    formatter: ''
                                }
                            },],
                        series: [{
                            name: "次数",
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            var value = p.value;
                                            if (value <= 0) {
                                                return ''
                                            }
                                            if (value >= 10000) {
                                                value = (value / 10000).toFixed(2) + "万"
                                            }
                                            return value + "次";
                                        }
                                    }
                                }
                            },
                            data: times
                        }, {
                            name: "销量",
                            type: 'bar',
                            yAxisIndex: 1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: "top",
                                        formatter: function (p) {
                                            var value = p.value;
                                            if (value <= 0) {
                                                return ''
                                            }
                                            if (value >= 10000) {
                                                value = (value / 10000).toFixed(2) + "万"
                                            }
                                            return value + "包";
                                        }
                                    }
                                }
                            },
                            data: quantity
                        },
                            {
                                name: "金额",
                                type: 'bar',
                                yAxisIndex: 2,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            position: "top",
                                            formatter: function (p) {
                                                var value = p.value;
                                                if (value <= 0) {
                                                    return ''
                                                }
                                                if (value >= 10000) {
                                                    value = (value / 10000).toFixed(2) + "万"
                                                }
                                                return value + "元";
                                            }
                                        }
                                    }
                                },
                                barGap: '10%',
                                data: prices
                            }]
                    }
                ;
                myChart5.setOption(main5Option,true)
            },
            updateMain6Data: function (main6Data) {
             //   if (!main6Data) return
                var names = []
                var times = []

                var totalTimes = 0;
                for (var index in main6Data) {
                    var data = main6Data[index]
                    names.push(data.name)
                    times.push(data.time)
                    totalTimes += data.time;
                }

                times.unshift(totalTimes);
                names.unshift("合计");

                var main6Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '消费人数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['消费人数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '消费人数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 人'
                            }
                        },],
                    series: [{
                        name: '消费人数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }]
                }
                myChart6.setOption(main6Option,true)
            },
            updateMain7Data: function (main7Data) {
            //    if (!main7Data) return

                var times = []
                var names = []
                var totalTimes = 0;
                for (var index in main7Data) {
                    var data = main7Data[index]
                    times.push(data.time);
                    names.push(data.name)
                    totalTimes += data.time;
                }

                times.unshift(totalTimes);
                names.unshift("合计");

                var main7Option = {
                    color: ['#4690FF'],
                    title: {
                        text: '消费次数前十客户'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['消费次数']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: names,
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '消费次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }],
                    series: [{
                        name: '消费次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }]
                }
                myChart7.setOption(main7Option)
            },
            updateMain8Data: function (main8Data) {
             //   if (!main8Data) return
                var times = []
                var quantity = []
                var prices = []
                var names = []

                var totilTimes = 0;
                var totilQuantity = 0;
                var totilPrices = 0;
                for (var index in main8Data) {
                    var data = main8Data[index]

                    times.push(data.time);
                    names.push(data.name)
                    quantity.push(data.quantity)
                    prices.push(data.prices)

                    totilTimes += data.time;
                    totilQuantity += data.quantity;
                    totilPrices += data.prices;
                }

                times.unshift(totilTimes);
                names.unshift("合计")
                quantity.unshift(totilQuantity)
                prices.unshift(totilPrices)

                var main8Option = {
                    color: ['#4690FF', '#A3D2F7'],
                    title: {
                        text: '消费者注册数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: false,
                                readOnly: false
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['购买次数', '购买量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                fontFamily: "微软雅黑",
                                fontSize: 12
                            }
                        },
                        data: ['00:00-05:59', '06:00-07.59', '08:00-09.59', '10:00-11.59', '12:00-13.59', '14:00-15.59', '16:00-17.59', '18:00-19.59', '20:00-21.59', '22:00-23.59']
                    }],
                    yAxis: [
                        {
                            type: 'value',
                            name: '购买次数',
                            position: 'left',
                            axisLabel: {
                                formatter: '{value} 次'
                            }
                        }, {
                            type: 'value',
                            name: '购买量',
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 包'
                            }
                        }],
                    series: [{
                        name: '购买次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: times
                    }, {
                        name: '购买量',
                        type: 'bar',
                        yAxisIndex: 1,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                            }
                        },
                        data: quantity
                    }]
                }
                myChart8.setOption(main8Option)
            },
            initProduct: function () {
                $.ajax({
                    url: '${contextPath}/page/getProductThreeName',
                    success: function (data) {
                        if (data.success) {
                            var zNodes = data.data;

                            var setting = {
                                check: {
                                    enable: true,
                                    chkStyle: "checkbox",
                                },

                                data: {
                                    simpleData: {
                                        enable: true,
                                        idKey: "ID",
                                        pIdKey: "PID",
                                        rootPId: '0',
                                    },
                                    key: {
                                        name: "NAME"
                                    },
                                },
                            };

                            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                        }
                    }
                })
            },

        },
    })


    $(".main").height($("#main1").width());
    var myChart1 = echarts.init($("#main1")[0])
    var myChart2 = echarts.init($("#main2")[0])

    //app.initProduct();
    app.initTimeInput()
    app.getData();

    var selectProductTreeNames = function () {
        $("#gridSystemModal").modal('hide')
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = zTree.getCheckedNodes();
        app.productCode = ""
        if (nodes.length == 0) {
            $("#prodNameInput").val("")
            app.productCode = "'6901028039741'"
            return
        }
        var length = 0;
        for (var index in nodes) {
            var node = nodes[index]
            if (node.ISPRODNAME) {
                app.productCode = "'" + node.ID + "'," + app.productCode
                length++;
            }
        }
        app.productCode = app.productCode.substr(0, app.productCode.length - 1)
        $("#prodNameInput").val("已选择" + length + "条品规")
    }


    var cityNode = null, quXianNode = null, channelNode = null, empNode = null, custNode = null, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>
</html>


